<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--    <script src="/lib/jquery.min.js"></script>-->
    <script src="/lib/vue.min.js"></script>
    <script src="/lib/axios.min.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="/lib/css/clothes_list.css">
</head>

<body>
<div class="outest" style="margin:0 auto; width: 90%; height:820px; margin-top:40px; box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)">
    <div id="app">
        <el-container>
            <el-header>
                <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
                    <el-menu-item index="1"><a href="/clothes_index_page">首页</a></el-menu-item>
                    <el-submenu index="2">
                        <template slot="title">用户管理</template>
                        <el-menu-item index="2-1"><a href="/user_list_page">所有用户</a></el-menu-item>
                    </el-submenu>
                    <el-submenu index="3">
                        <template slot="title">服装管理</template>
                        <el-menu-item index="3-1"><a href="/clothes_list_page">所有服装</a></el-menu-item>
                    </el-submenu>
                    <el-submenu index="4">
                        <template slot="title">仓库管理</template>
                        <el-menu-item v-for="item, index in authinstocks" :index="item.id">
                            {{item.name}}
                        </el-menu-item>
                    </el-submenu>
                    <el-submenu index="5" style="float: right">
                        <template slot="title"><el-avatar :src="imgUrl"></el-avatar>&nbsp;我</template>
                        <el-menu-item index="5-1">个人中心</el-menu-item>
                        <el-menu-item index="5-2">退出</el-menu-item>
                    </el-submenu>
                    <div style="clear: both"></div>
                </el-menu>
            </el-header>

            <el-main>
                <th:block shiro:hasPermission="director">
                    <div style="position:absolute; left: 120px"><el-button type="success" plain size="medium" @click.native="addUserPage()">添加用户信息</el-button></div>
                </th:block>
                <template>
                    <el-table
                            :data="tableData"
                            style="width: 100%">
                        <el-table-column
                                label="序号"
                                prop="id">
                        </el-table-column>
                        <el-table-column
                                label="身份授权"
                                prop="auth">
                        </el-table-column>
                        <el-table-column
                                label="账号"
                                prop="account">
                        </el-table-column>
                        <el-table-column
                                label="负责仓库"
                                prop="depot.name">
                        </el-table-column>
                        <el-table-column
                                label="姓名"
                                prop="name">
                        </el-table-column>
                        <th:block shiro:hasPermission="director">
                            <el-table-column
                                    align="right">
                                <template slot="header" slot-scope="scope">
                                    <el-input
                                            v-model="search"
                                            size="mini"
                                            @keyup.enter.native="handleCurrentChange(1)"
                                            placeholder="输入关键字搜索"/>
                                </template>
                                <template slot-scope="scope">
                                    <el-button
                                            size="mini"
                                            @click="handleEdit(scope.$index, scope.row)">Edit</el-button>
                                    <el-button
                                            size="mini"
                                            type="danger"
                                            @click="handleDelete(scope.$index, scope.row)">Delete</el-button>
                                </template>
                            </el-table-column>
                        </th:block>
                    </el-table>
                </template>

                <div class="block">
                    <el-pagination
                            @current-change="handleCurrentChange"
                            :current-page="currentPage"
                            :page-size="size"
                            layout="total, prev, pager, next, jumper"
                            :total="total">
                    </el-pagination>
                </div>
            </el-main>

            <el-footer>
                版权所有 &nbsp;&nbsp;&nbsp;&nbsp; <el-link type="info">www.huangyt.com</el-link>
            </el-footer>

        </el-container>
    </div>
</div>

<script>
    var vue = new Vue({
        el:"#app",
        data:{
            activeIndex: '2-1',
            search: '',
            pageable:{},
            tableData:[],
            total:0,
            currentPage: 1,
            size:8,
            account:'',
            authinstocks:[],
            imgUrl:'',
            id:'',
        },
        mounted: function () {
            this.handleCurrentChange(this.currentPage);
            this.getuser();
        },
        methods:{
            logout: function () {
                var obj = this;
                var url = "login/out";
                axios.get(url).then(function (response) {
                    var res = response.data;
                    if(res.success){
                        obj.$message({
                            type: 'success',
                            message: '登出成功!'
                        });
                        vue.jump("login_page");
                    }else {
                        console.log("登出失败");
                        obj.$message.error({
                            type: 'fail',
                            message: res.msg
                        });
                    }
                })
            },
            getuser: function(){
                var obj = this;
                var url = "login/getuser";
                axios.get(url).then(function (response) {
                    var res = response.data;
                    if(res.success){
                        var id = res.data.id;
                        var time = new Date().getTime();
                        vue.id = res.data.id;
                        vue.account = res.data.account;
                        vue.imgUrl = "images/user/" + id + ".jpg?timestamp=" + time;
                        console.log("this.imgUrl:" + vue.imgUrl);
                        vue.getauthinstock(vue.account);
                    }else {
                        obj.$message.error({
                            type: 'fail',
                            message: res.msg
                        });
                        vue.jump("login_page");
                    }
                })
            },
            getauthinstock: function(account){
                console.log("account:" + account);
                var obj = this;
                var url = "login/getauthorInstock/" + account;
                console.log("url:" + url)
                axios.get(url).then(function (response) {
                    var res = response.data;
                    if(res.success){
                        vue.authinstocks = res.data;
                        console.log("vue.authinstocks:" + vue.authinstocks);
                    }else {
                        obj.$message.error({
                            type: 'fail',
                            message: res.msg
                        });
                        vue.jump("login_page");
                    }
                })
            },

            handleSelect(key, keyPath) {
                console.log("key:" + key);
                console.log("keyPath:" + keyPath);
                if(keyPath[0]==4){
                    window.location.href = "instock_list_page?depotid=" + key;
                }
                if(key=="5-1"){
                    var url = "user_center_page?id=" + this.id;
                    window.location.href = url;
                }
                if(key=="5-2"){
                    this.logout();
                }
                this.activeIndex = key;
            },
            addUserPage: function(){
                window.location.href = "user_add_page";
            },
            //表格
            handleEdit: function(index, row) {
                console.log(index);
                console.log(row.isitem);
                var url = "user_edit_page?id=" + row.id;
                window.location.href = url;
            },
            handleDelete: function(index, row) {
                var obj = this;
                console.log(index, row.isitem);
                var url = "user/del/" + row.id + "/";
                console.log("url:" + url);
                this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    axios.delete(url).then(function (response) {
                        var res = response.data;
                        if(res.success){
                            obj.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                            vue.handleCurrentChange(vue.currentPage);
                        }else {
                            obj.$message.error({
                                type: 'fail',
                                message: res.msg
                            });
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            //分页
            handleCurrentChange: function(page) {
                this.currentPage = page;
                var size = this.size;
                var url = "user/list/" + page + "/" + size;
                console.log("url:" + url);
                axios.get(url).then(function (response) {
                    var res = response.data.data;
                    console.log("res.content:" + res.content);
                    vue.tableData = res.content;
                    vue.total = res.totalElements;
                    console.log("你好：" + JSON.stringify(vue.tableData));

                });
            },
            jump: function(url){
                setInterval(function () {
                    window.location.href = url;
                }, 1000);
            },
        }
    })
</script>
</body>
</html>